import React, { useState } from "react";
import { Form, Button, Input, Dialog } from "antd-mobile";
import { Login } from "../../api";
import { connect } from "react-redux";
import { Loading } from "antd-mobile";
function LoginPage(props: any) {
	const { setToken } = props;
	const [loading, setLoading] = useState(false);
	const onFinish = (values: any) => {
		console.log(values);
		// https://mock.mengxuegu.com/mock/6178f302722e444f8c701bf4/api/login
		setLoading(true); // 打开loading
		Login().then((res: any) => {
			setToken(res.data.token);
			setLoading(false); // 关闭loading
			props.history.push("/home");
		});
	};

	return (
		<div>
			<LoadingComponent loading={loading}></LoadingComponent>
			<Form
				onFinish={onFinish}
				footer={
					<Button block type="submit" color="primary">
						登录
					</Button>
				}
			>
				<Form.Item
					name="账号"
					label="账号"
					rules={[{ required: true, message: "账号不能为空" }]}
				>
					<Input placeholder="请输入用户名" clearable />
				</Form.Item>
				<Form.Item
					name="密码"
					label="密码"
					rules={[{ required: true, message: "密码不能为空" }]}
				>
					<Input placeholder="请输入密码" clearable type="password" />
				</Form.Item>
			</Form>
		</div>
	);
}

function LoadingComponent(props: any) {
	const { loading } = props;
	return (
		<>
			{loading ? (
				<div className="mask">
					<Loading color="white" />
				</div>
			) : (
				<></>
			)}
		</>
	);
}
const mapStateToProps = (state: any) => state;
const mapActionToProps = (dispatch: any) => {
	return {
		setToken(token: string) {
			dispatch({ type: "SET_TOKEN", data: token });
		},
	};
};
export default connect(mapStateToProps, mapActionToProps)(LoginPage);

// 大公司 20000 全额五险一金 4000 3000 15000 23000
// 小公司 20000 5000五险一金 500 800 18000 20000
